<template>
	<view class="take-exercise">
		<view v-if="showCalendar">
			<uni-calendar class="uni-calendar--hook"  :end-date="utils.initDateDay()" :selected="info.selected" :showMonth="false" @change="change" @monthSwitch="monthSwitch" />
		</view>
		<view v-if="!accountId || keyData">
			<view class="select-class">
				<uni-combox
				 	v-if="!accountId"
					class="select-filter"
					:candidates="classList"
					placeholder="请选择体育项目"
					:border="false"
					v-model="curOption"
					@change="comboxChange"></uni-combox>
					<text v-else class="show-name">{{curOption}}</text>
			</view>
			<view class="text-box">
				<textarea :disabled="accountId?true:false" :value="keyData" placeholder="记录锻炼的关键数据，如时间，频次、强度" placeholder-style="color: #999;" @input="keyDataInput"></textarea>
			</view>
		</view>
		<view class="keep-btn" v-if="!accountId" @click="updateExercise" :style="{opacity: curOption&&keyData?1:.3}">
			保存
		</view>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg" :show="pointPrize>0" @click="pointPrize=0">
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.fade"
			:show="pointPrize>0">
			<view class="point-prize popup-top">
				<text class="point-tips">{{pointPrize==1?'补卡成功':'打卡成功'}}</text>
				<view class="point-content">
					<view class="point">
						{{score>0?`+${score}`:'暂无'}}积分
					</view>
					<view class="tips" v-html="popupText">
					</view>
					<text class="close-popup" @click="pointPrize=0">知道了</text>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>

export default {
	data() {
		return {
			showCalendar: false,
			info: { // 打卡信息
				lunar: true,
				range: true,
				insert: false,
				selected: []
			},
			classList: {1: '跑步', 2:'篮球', 3:'足球', 4:'排球', 5:'游泳', 6:'仰卧起坐'},
			curOption: '', // 当前选择的体育项目
			pointPrize: 0, // 1.'补卡成功' 2.'打卡成功'
			score: 10, // 打卡成功后获得的积分值
			popupText: `今日锻炼打卡成功,
每天坚持打卡可获得更多`,
			todayTime: '', // 今日凌晨的时间戳
			keyData: '', // 记录锻炼的关键数据
			currentData: {} // 选择日期的打卡数据
		};
	},
	props: {
		onShow: {
			type: Number,
			default: 0
		},
		downRefresh: { // 监听页面上拉
			type: Number,
			default: 0
		},
		accountId: { // 用户ID 
			type: String,
			default: ''
		}
    },
	watch: {
		onShow(val){
			this.getfindExercise()
		},
		downRefresh(val){
			this.getfindExercise()
		}
	},
	mounted() {
		let date = this.utils.initDateDay().split('-').join('/')
		this.todayTime = new Date(date).getTime()
		this.$nextTick(() => {
			this.showCalendar = true
		})
		this.getfindExercise()
	},
	methods: {
		getfindExercise(type){
			this.api.get('exercise/findExercise', {
				date: this.utils.initDateDay(),
				accountId: this.accountId
			}).then(res=>{
				if(res.data.state != 'ok') return
				let list = res.data.exerciseRecord;
				this.info.selected = []
				for(let i=0; i<list.length; i++){
					let info = list[i],
					date1 = info.date.split(' ')[0]

					if(this.utils.initDateDay() == date1 && type!='keep'){
						this.curOption = info.sports || ''
						this.keyData = info.content || ''
						this.currentData = info;
					}
					let obj = {date: date1, info: 1, id: info.id, content: info.content, sports: info.sports}
					this.info.selected.push(obj)
				}
			})
		},
		exerciseClock(date){
			let dateTime = new Date(date.split('-').join('/')),
			leff = this.todayTime - dateTime;
			if(dateTime>this.todayTime || leff>30*24*60*60*1000) return

			this.api.post('exercise/exerciseClock', {
				date: date
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.info.selected.push({
					date: date,
					info: '1',
					id: res.data.exerciseId,
					// content: 
				})
				this.score = res.data.scoreChange
				this.currentData.id = res.data.exerciseId
				if(leff==0){
					this.pointPrize = 2
					this.popupText = `今日锻炼打卡成功
每天坚持打卡可获得更多积分~`
				}else{
					
					this.pointPrize = 1
					this.popupText = `今日锻炼补卡成功
每天坚持打卡可获得更多积分~`
				}
			})
		},
		change(e) {
			let item = this.info.selected.find(item => item.date == e.fulldate) || {}

			this.curOption = item.sports || ''
			this.keyData = item.content || ''
			this.currentData = item;
			if(!this.accountId){
				
				if(!e.extraInfo || e.extraInfo.info != 1){
					
					this.exerciseClock(e.fulldate)
					
				}
			}
			
		},
		monthSwitch(e) {
			// console.log('monthSwitchs 返回:', e)
		},
		comboxChange(i){
		},
		keyDataInput(e){
			this.keyData = e.detail.value;
		},
		updateExercise(){
			if(!this.currentData.id){
				this.utils.showToast('请先打卡')
				return
			}
			if(!this.keyData){
				this.utils.showToast('请填写关键数据')
				return
			}
			if(!this.curOption){
				this.utils.showToast('请选择体育项目')
				return
			}
			this.api.post('exercise/updateExercise', {
				exerciseId: this.currentData.id,
				sports: this.curOption,
				content: this.keyData
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.utils.showToast('保存成功')
				setTimeout(()=>{
					this.getfindExercise('keep')
				}, 1000)
				
			})
		},
		
	}
};

</script>
<style lang="less" scoped>
	.take-exercise{
		min-height: 100vh;
		background-color: #fff;
	}
	.select-class{
		margin: 32rpx 32rpx 0;
		background: #F4F4F4;
		padding: 4rpx 0;
		border-radius: 20rpx;
		.show-name{
			display: inline-block;
			padding: 16rpx 32rpx;
		}
	}
	.select-filter{
		padding: 16rpx 32rpx;
	}
	.text-box{
		margin: 32rpx 32rpx 0;
		background-color: #F4F4F4;
		border-radius: 20rpx;
		padding: 32rpx;
		textarea{
			height: 92rpx;
		}
	}
	.keep-btn{
		margin: 32rpx 32rpx 0;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #28C2CD;
		color: #fff;
		border-radius: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
	}
	// 获取积分时弹窗
	.point-prize{
		// position: absolute;
		background-color: transparent;
		width: 560rpx;
		height: 745rpx;
		background-image: url(~@/static/dkcg.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0;
		
	}
	.point-tips{
		position: absolute;
		top: 270rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		
	}
	.point-content{
		position: absolute;
		width: 100%;
		bottom: 50rpx;
		text-align: center;
		
	}
	.point{
		color: #FA7F45;
		font-size: 48rpx;
		font-weight: bold;
	}
	.tips{
		white-space: pre-line;
		margin-top: 24rpx;
		color: #666666;
		font-size: 26rpx;
		line-height: 42rpx;
		
	}
	.close-popup{
		margin-top: 40rpx;
		display: inline-block;
		width: 320rpx;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #FA7F45;
		border-radius: 20rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>